<template>
    <div class="header">
        <div class="header-title">叩丁狼客户管理系统</div>
        <div class="collapse-btn" @click="collapseChange()">
            <i class="el-icon-menu"></i>
        </div>
        <section class="header-right">
            <el-dropdown class="user-name" trigger="click" @command="handleCommand">
                <span class="el-dropdown-link">{{username}}<i class="el-icon-caret-bottom"></i></span>
                <el-dropdown-menu>
                    <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </section>
    </div>
</template>

<script>
    import bus from './bus'
    import {logoutApi} from '@/request/api'

    export default {
        data() {
            return {
                collapse: false,
                username: localStorage.getItem('username')
            }
        },
        components: {},
        methods: {
            // 侧边栏折叠
            collapseChange() {
                this.collapse = !this.collapse
                bus.$emit('collapse', this.collapse)
            },
            // 用户名下拉菜单选择事件
            handleCommand(command) {
                if (command === 'logout') {
                    logoutApi({
                        token: localStorage.getItem('token')
                    }).then(res => {
                        if (res.success === true) {
                            localStorage.removeItem('token')
                            localStorage.removeItem('username')
                            this.$message.success(res.msg)
                            this.$router.push('/login')
                        } else {
                            this.$message.error(res.msg)
                        }
                    })
                }
            }

        }
    }
</script>

<style lang="less" scoped type="text/less">

    .header {
        width: 100%;
        height: 70px;
        color: #fff;
        background-color: #409EFF;

        .header-title {
            float: left;
            padding: 0 15px;
            line-height: 70px;
            font-size: 22px;
        }

        .collapse-btn {
            float: left;
            line-height: 70px;
            font-size: 20px;
        }

        .header-right {
            float: right;
            display: flex;
            align-items: center;
            height: 70px;
            .user-name {
                padding-right: 15px;
                cursor: pointer;

                .el-dropdown-link {
                    color: #fff;
                }
            }
        }
    }
</style>